<template>
  <div class="chargingTable">
    <div class="tools">
      <Search @clearSearch="pageRefresh" :placeholder="placeholder"></Search>
    </div>
    <div class="table">
      <el-table
        :data="data.slice((lazyPage - 1) * pageSize, lazyPage * pageSize)"
        stripe
        style="margin: 0 auto; width: 98%; font-size: 1rem"
      >
        >
        <el-table-column
          prop="space_no"
          label="停车位编号"
          width="150"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="charging_start"
          label="充电开始时间"
          width="280"
          min-width="280"
        >
        </el-table-column>
        <el-table-column
          prop="charging_end"
          label="充电结束时间"
          width="280"
          min-width="280"
        >
        </el-table-column>
        <el-table-column
          prop="charging_power"
          label="充电功率"
          width="120"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.charging_power }}%</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="Edit(scope.$index, scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { PageHeight } from "../utils/PageHeight";
import Search from "../components/Search.vue";
export default {
  name: "ChargingTable",
  components: {
    Search,
  },
  data() {
    return {
      placeholder: "请输入停车位编号",
      pageSize: 3,
      data: [
        {
          space_id: 1,
          space_no: 1,
          charging_start: "",
          charging_end: "",
          charging_power: 100.0,
        },
      ],
      currentPage_old: 1,
      currentPage: 1,
      total: 0,
    };
  },
  mounted() {
    const height = window.innerHeight;
    this.pageSize = PageHeight(height);
    this.getChargingList();
  },
  computed: {
    lazyPage: function () {
      if (this.currentPage < 4) {
        return this.currentPage;
      } else {
        return this.currentPage % 3 === 0 ? 3 : this.currentPage % 3;
      }
    },
  },
  methods: {
    //获取充电列表
    getChargingList() {
      this.axios
        .get("/charging/chargingList", {
          params: {
            page: 1,
            count: this.pageSize * 3,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.data = res.data.data.list;
            this.total = res.data.data.total;
            this.$emit("getChargingData", this.data);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取充电车位列表失败");
        });
    },
    //编辑
    Edit(index, row) {
      this.$router.push("/charging/edit/id=" + row.space_id);
    },
    //刷新页面
    pageRefresh() {
      this.$emit("refresh");
    },
    //车位ID搜索搜索
    searchCharging(val) {
      this.axios
        .get("/charging/searchCharging", {
          params: {
            spaceNo: val,
          },
        })
        .then((res) => {
          this.data = [];
          this.data.push(res.data.data);
        })
        .catch((err) => {
          this.$message.error("搜索充电停车位失败");
          console.error(err);
        });
    },
    //分页函数
    handleCurrentChange(val) {
      this.currentPage = val;
      if (Math.ceil(this.currentPage_old / 3) !== Math.ceil(val / 3)) {
        this.currentPage_old = val;
        this.pageLoad("/charging/chargingList", val, 3, this.pageSize * 3)
          .then((res) => {
            this.data = res.data.data.list;
          })
          .catch((err) => {
            console.error(err);
            this.$message.error(`获取充电车位列表-第${val}页失败`);
          });
      }
    },
  },
  watch: {
    $route: {
      handler(val) {
        const spaceNo = val.query.search;
        if (spaceNo !== undefined) {
          this.searchCharging(spaceNo);
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.tools {
  position: relative;
  width: 100%;
  height: 40px;
}
.table {
  margin-top: 15px;
  width: 100%;
  height: 65vh;
}
.pagination {
  float: right;
  width: 50%;
  height: 5vh;
}
.table /deep/.el-table th > .cell {
  text-align: center;
}

.table /deep/.el-table .cell {
  text-align: center;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #83b7eb;
  border-radius: 5px;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track-piece {
  background-color: #e6e6e6;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #2979c9;
}

.table /deep/ .el-table__fixed,
.table /deep/ .el-table__fixed-right {
  height: calc(100% - 7px) !important;
  box-shadow: -5px -2px 10px rgba(0, 0, 0, 0.12) !important;
}
.table /deep/ .el-table__fixed-body-wrapper {
  height: calc(100% - 36px) !important;
}

.table
  /deep/
  .el-table__body-wrapper.is-scrolling-none
  ~ .el-table__fixed-right {
  height: 100% !important;
  bottom: 0 !important;
  box-shadow: none !important;
}
</style>